<script setup>
import * as echarts from 'echarts';
import {onMounted, ref} from "vue";
import temblorCanteen from "@/api/temblor/temblorCanteen.js";

const statisticsRef = ref(null)
const date = ref()
const data = ref([]);
const loading = ref(true)

const getData = async () => {
  const res = await temblorCanteen.eatNumber({
    date: date.value
  })
  const myChart = echarts.init(statisticsRef.value)
  let option;
  option = {
    title: {
      text: '餐费统计——吃饭次数',
      subtext: '每月每人吃饭日期和吃饭天数',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      top: 20,
      bottom: 20,
      // data: data.legendData
      data: res.data.username
    },
    series: [
      {
        name: '姓名',
        type: 'pie',
        radius: '55%',
        center: ['40%', '50%'],
        // data: data.seriesData,
        data: res.data.eatNumber,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option && myChart.setOption(option);
  loading.value = false
}
onMounted(async () => {
  await getData()
})
const changeDate = () => {
  loading.value = true
  getData()
}
</script>

<template>

  <a-card>
    <a-layout>
      <a-month-picker style="width: 200px;" @change="changeDate" v-model="date"/>

      <a-spin :loading="loading" tip="加载中...">
        <div ref="statisticsRef" style="width: 1200px;height: 500px;"></div>
      </a-spin>
    </a-layout>
  </a-card>
</template>

<style scoped>

</style>